<template>
  <el-container class="index-box">
    <el-aside :class="asideWidth">
      <div class="logo">
        <img
          v-show="!isCollapse"
          src="./../assets/logo.png"
          alt="ELementUI"
          width="122"
          height="27"
        />
      </div>
      <menus :isCollapse="isCollapse" />
    </el-aside>

    <el-container>
      <el-header>
        <headers @collapse="collapse" />
      </el-header>
      <el-main>
        <div class="main-boxs">
          <router-view v-if="isRouterAlive" />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Menus from "../components/menus/menus.vue";
import Headers from "../components/header/header.vue";
import { getCookie, setCookie } from "../util/Store";
export default {
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isCollapse: true,
      isRouterAlive: true,
    };
  },
  components: {
    Menus,
    Headers,
  },
  mounted() {
    let is_collapse = getCookie("is_collapse");
    this.isCollapse = is_collapse ? false : is_collapse;
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    collapse() {
      console.log(this.isCollapse);
      this.isCollapse = !this.isCollapse;
      setCookie("is_collapse", this.isCollapse);
    },
  },
  computed: {
    asideWidth() {
      return this.isCollapse ? "tran2" : "tran1";
    },
  },
};
</script>

<style>
.index-box {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  background: #f0f2f5;
}

.main-boxs {
  background: #fff;
  padding: 20px;
}

.el-container {
  height: 100%;
}

.el-main {
  height: 100%;
  padding: 10px 6px !important;
}

.el-header {
  border-bottom: 1px solid #f6f6f6;
  box-sizing: border-box;
  background-color: #fff;
  line-height: 60px;
}

.logo {
  background-color: #20222a;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  height: 60px;
  padding-top: 16px;
  font-size: 16px;
  box-sizing: border-box;
  /* border-bottom: 1px solid gray; */
}

.el-aside {
  background-color: #20222a;
  height: 100vh;
  min-height: 100%;
  transition: width 0.5s;
  -moz-transition: width 0.5s; /* Firefox 4 */
  -webkit-transition: width 0.5s; /* Safari and Chrome */
  -o-transition: width 0.5s; /* Opera */
}

.tran1 {
  width: 200px !important;
}

.tran2 {
  width: 64px !important;
}
</style>
